<template>
    <div class="nav">
            <div class="left">
                <slot name="left"></slot>
            </div>

            <div class="center">
                <slot name="center"></slot>
            </div>
            
       <div class="right">
               <div v-if="isLogin">
                   <div class="rights" @click="$router.push('/login')" v-if="!this.$store.state.userId">
                    登录 | 注册
                </div>
                    <div v-else>
                        <van-icon name="manager" @click="$router.push('/mine')"/>
                    </div>
               </div>
                <slot name="right"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props:['isLogin']
}
</script>

<style lang="less" scoped>
@h:45px;
.nav{
    width: 100%;
    height:@h;
    line-height: @h;
    background: #3190e8;
    color: #fff;
    display: flex;
    font-size: 16px;
    .left{
        width: 20%;
        text-align: center;
    }
    .right{
        width: 25%;
        text-align: center;
    }
    .center{
        width: 55%;
        text-align: center;
    }
}

</style>